import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Table, Flex } from 'antd';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { Link } from 'react-router-dom'
import { GROUP_FIRST_ROUND, GROUP_HAS_TARGET } from '../contants'
import { putPlayIndex, putPlayList } from '../redux/reducers'
import { fetchJobList } from '../redux/actions.js'

function AnalysisPage(props) {
  const dispatch = useDispatch()
  const categories = ['女装', '大健康', '食品', '护肤', '母婴', '个护', '二奢', '珠宝', '全品类' , '美妆','其他', '未分类']
  const color_map = ['#F44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3d', '#ffeb3d', '#ffeb3d' ]
  const [current, setCurrent] = React.useState('');
  useEffect(()=>{
    dispatch(fetchJobList())
  }, [])

  const handleChange = (e, value
  ) => {
    setCurrent(value);
  };

  const dataList = useSelector(state => state.job.dataListFiltered.filter(item => {
    return item['group'] == GROUP_FIRST_ROUND
    // return item['group'] == GROUP_FIRST_ROUND || item['group'] == GROUP_HAS_TARGET
  }))

  let dataShow = []
  if (current == '未分类') {
    dataShow = dataList.filter(item => !item['category'])
  } else if (!current) {
    dataShow = dataList
  } else {
    dataShow = dataList.filter(item => item['category'] == current)
  }


  const renderTitle = (name, record, index)=>{
    return (
      <div>
        <Link to={`/jobList/detail/${index}`}>
          <label style={{color: 'blue'}}>
            <span>{record.brandName}</span>
            <span style={{color: 'red'}}>{record.salaryDesc}</span>
          </label>
        </Link>
        <span onClick={()=>{
          dispatch(putPlayIndex(index))
          dispatch(putPlayList(dataShow))
        }}>
          <Link to={'/jobList/detailFunction/targetGroup'}>
            <label style={{background: '#1890ff', borderRadius: 4, color: '#fff', padding: '2px 4px' }}>分类</label>
          </Link>          
        </span>
      </div>
    )
  }



  const columns = [
    {
      title: '标题',
      dataIndex: 'jobName',
      key: 'title',
      width: 210,
      render: renderTitle
    },
    {
      title: '职位',
      dataIndex: 'jobName',
      key: 'jobName',
      width: 160,
      render:(value, record)=>{
        return <div onClick={()=>{
          window.open('https://www.zhipin.com/job_detail/'+ record.lid +'.html', '_blank')
        }} style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace:'nowrap', color: 'blue'}}>{value}</div>
      }
    },
    {
      title: '类目',
      dataIndex: 'category',
      key: 'category',
      width: 80
    },
    {
      title: '区域',
      dataIndex: 'areaDistrict',
      key: 'areaDistrict',
      width: 100,
      render: (text, record) => {
        return `${text} | ${record.businessDistrict}`
      }
    }
  ];

  return (
    <div>
      <div>
        <ToggleButtonGroup
          color="primary"
          value={current}
          exclusive
          onChange={handleChange}
          aria-label="Platform"
        >
          {categories.map(((value, i) => {
            const count = dataList.filter(item => item.category == value).length
            if (!count) {
              return null
            }
            return <ToggleButton style={{background:color_map[i], color: '#fff'}} value={value}>
              {value}
              ({count})
              </ToggleButton>
          }
             ))}
        </ToggleButtonGroup>
      </div>
      <div style={{ marginTop: 20 }}>
        <Table
          size="small"
          scroll={{ y:40*15}}
          columns={columns}
          dataSource={dataShow}
          pagination={{ 
            pageSize: 100, 
            total: dataShow.length,
            showTotal: (total, range) => { return `第${range[0]}-${range[1]}条  共${total} 条`},
            onChange: (page, pageSize) => {
              page = page
              pageSize = pageSize
            }
          }}
        />
      </div>
    </div>)

}

export default AnalysisPage